<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <button id="btn">点击</button>
    <div class="menu"></div>
  </body>
</html>
<style>
  .menu div {
    width: 200px;
    border: 1px solid skyblue;
  }
  .sub {
    padding-left: 20px;
  }
</style>
<script>
  //封装简易版ajax
  function ajax(option) {
    let xhr = new XMLHttpRequest();
    //解构option
    let { url, method = "get", success } = option;
    xhr.open(method, url);
    xhr.send(null);
    xhr.onload = function () {
      success(JSON.parse(this.responseText));
    };
  }

  // 获取元素
  let btn = document.querySelector("#btn");
  let menu = document.querySelector(".menu");
  // 需求
  // 1.点击按钮 发送请求 获取'树形’数据
  btn.onclick = function () {
    ajax({
      url: "http://chst.vip/data/tree.json",
      method: "get",
      success(res) {
        // console.log(res);
        tree(res.data, menu);
      },
    });
  };
  // 树形数据一般通过‘children树形’来描述 当前数据的‘子集’
  // 2.根据‘树形’数据动态创建结构
  //声明一个叫tree的函数
  //   data参数：传递进来的树形数据
  // dom：容器元素
  function tree(data, dom) {
    console.log(data, dom);

    // 1.遍历data数据，先将外层数据中的div创建出来
    data.forEach((item) => {
      console.log(_c(item));
      // 将创建出来的结构添加到页面中
      dom.appendChild(_c(item));
    });
    // 2.需要一段逻辑创建结构
    function _c(item, isSub = false) {
      //假如item={id:1,name:'管理首页'，children:array(1)}
      let div = document.createElement("div");
      if (isSub) {
        //   说明这是个子节点，加上sub类名
        div.className = div.className = "sub"; //这么写的目的是防止div上有其他类名，这样可以多个类名共存
      }
      div.innerText = item.name;
      div.id = item.id;
      //   判断item有没有子节点，如果有就递归自己，重新创建节点
      //   需保证item有children属性，是一个数组，并且数组的length不能是0
      if (item.children && item.children.length > 0) {
        //因为tree要接收一个单个的对象，而child是一个数组，不能直接进去处理
        item.children.forEach((childrenItem) => {
          //   console.log(_c(childrenItem));
          div.appendChild(_c(childrenItem, true));
        });
      }
      return div;
    }
  }
</script>
